<script setup lang="ts">
import { ref } from 'vue'
import ContactSidebar from './components/ContactSideBar.vue'
import ChatArea from './components/ChatArea.vue'
import type {UserVO} from "@/types/vo/UserVO";
import {getMessageUserListService} from "@/apis/front/chat";

// 联系人列表
const contacts = ref<UserVO[]>([])

// 当前选择的联系人
const currentContact = ref<UserVO>()

const loading = ref(false)

// 获取联系人列表
const getUserList = async () => {
  try {
    loading.value = true
    const res = await getMessageUserListService()
    contacts.value = res.data.data
  } finally {
    loading.value = false
  }
}

const selectContact = (contact: UserVO) => {
  currentContact.value = contact
  // 当前联系人的未读消息改成0
  contacts.value = contacts.value.map((item) => {
    if (item.id === contact.id) {
      item.unreadMessageCount = 0
    }
    return item
  })
}

const route = useRoute()

onMounted(async () => {
  await getUserList()
  const toId = route.query.toId
  if(toId){
    console.log(toId)
    const find = contacts.value.find(item => item.userName === toId);
    if(find){
      selectContact(find)
    }
    console.log(currentContact.value);
  }
})

</script>

<template>
  <div class="chat-container">
    <ContactSidebar
      :contacts="contacts"
      :currentContactId="currentContact?.id"
      @select-contact="selectContact"
      :loading="loading"
    />

    <ChatArea
      :currentContact="currentContact"
    />
  </div>
</template>



<style scoped>
.chat-container {
  display: flex;
  height: 100%;
  width: 100%;
  background-color: #f5f7fa;
}
</style>
